
<template>
  <div class="app-container service-container">
    <div class="title-row flex-normal">
      <div :class="['title-content flex-center', currentModel.name == model.name && 'active']" 
      v-for="(model, index) in modelList" :key="index" @click="tabChange(model)">
        <span class="title-txt">{{ model.label }}</span>
      </div>
    </div>
    <div class="list-content">
      <div class="app-search-container clearfix">
        <el-form class="search-form" :inline="true" size="small">
          <el-form-item v-for="(item, index) in currentModel.selectProp['selectList']" :key="index"
            :class="item.type == 'areaMap' && 'area-content'" :label="item.label">
            <template v-if="item.isShow && item.type == 'select'">
              <el-cascader clearable
              v-model="currentModel.params[item.name]"
              :options="optionsTwoList"
              placeholder="请选择服务类型"></el-cascader>
            </template>
            <template v-if="item.isShow && item.type == 'input'">
              <el-input v-model="currentModel.params[item.name]" :placeholder="item.placeholder" clearable size="small" />
            </template>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search"
              @click="searchAction" size='mini'>搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="app-permission-container flex-between mb8">
        <span class="page-list-title">{{currentModel.name == 'zyfw' ? '服务列表' : '服务类型列表'}}</span>
        <el-button v-hasPermi="['system:acddServe:add']"
        :loading="boo.loading_newZyfw" type="primary" 
        size="mini" @click="showDialog(currentModel.name, 'add')"
        >新增</el-button>
      </div>
      <div class="app-table-container" v-loading="currentModel.boo.loading">
        <template v-if="currentModel.name == 'zyfw'">
          <el-table :data="currentModel.list" border >
            <el-table-column
              label="服务类型"
              align="center"
              key="serveType"
              prop="serveType"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{row}">
                {{ row.serveTypeTwo == '0' ? '服务' : '外部卡券' }} - {{ row.serveType }}
              </template>
            </el-table-column>
            <el-table-column
              label="服务名称"
              align="center"
              key="serveName"
              prop="serveName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="服务封面"
              align="center"
              key="imgUrl"
              prop="imgUrl"
              :show-overflow-tooltip="true"> 
              <template slot-scope="{row}">
                <ImagePreview :src="row.imgUrl || ''" width="80px" height="80px"/>
              </template>
            </el-table-column>
            <el-table-column
              label="服务明细"
              align="center"
              key="serveDetails"
              prop="serveDetails"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="已售"
              align="center"
              key="soldNum"
              prop="soldNum"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="已核销"
              align="center"
              key="writeOffNum"
              prop="writeOffNum"
            />
            <el-table-column
              label="服务次数"
              align="center"
              key="itemNum"
              prop="itemNum"
            />
            <el-table-column
              label="市场单价（元）"
              align="center"
              key="price"
              prop="price"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="核销价（元）"
              align="center"
              key="writeOffFee"
              prop="writeOffFee"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="操作"
              align="center"
              width="240"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{row}">
                <el-button
                  size="mini"
                  type="text" v-hasPermi="['system:acddServe:edit']"
                  icon="el-icon-edit" :loading="row.isEdit"
                  @click="showDialog('zyfw', 'edit', row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete" v-hasPermi="['system:acddServe:remove']"
                  @click="deleteRow(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="currentModel.other.total > 0"
            :total="currentModel.other.total"
            :page.sync="currentModel.params.pageNum"
            :limit.sync="currentModel.params.pageSize"
            @pagination="queryList"
          />
        </template>
        <template v-if="currentModel.name == 'fwlx'">
          <el-table v-hasPermi="['system:acddServe:list']"
          :data="currentModel.list" border>
          <el-table-column
            label="类型"
            align="center"
            key="serveTypeTwo"
            prop="serveTypeTwo">
            <template slot-scope="{row}">
              {{row.serveTypeTwo == '1' ? '外部卡券' : '服务'}}
            </template>
          </el-table-column>
          <el-table-column
            label="类型名称"
            align="center"
            key="serveType"
            prop="serveType"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="图片"
            align="center"
            key="serveTypeImg"
            prop="serveTypeImg"
            :show-overflow-tooltip="true"> 
            <template slot-scope="{row}">
              <ImagePreview :src="row.serveTypeImg" width="80px" height="80px"/>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            key="typeStatus"
            prop="typeStatus"
            :show-overflow-tooltip="true">
            <template slot-scope="{row}">
              <el-tag size="mini" :type="row.typeStatus ? 'success' : 'danger'">
                {{ row.typeStatus ? '已启用' : '已禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="240"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{row}">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit" v-hasPermi="['system:acddServe:edit']"
                @click="showDialog('fwlx', 'edit', row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text" v-hasPermi="['system:acddServe:pause']"
                icon="el-icon-video-pause"
                :loading="row.isControl"
                @click="controlTypeRow(row)"
                >
                {{ row.typeStatus ? '禁用' : '启用' }}
                </el-button
              >
              <el-button
                size="mini"
                type="text" v-hasPermi="['system:acddServe:remove']"
                icon="el-icon-delete"
                @click="deleteRow(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
          <pagination
            v-show="currentModel.other.total > 0"
            :total="currentModel.other.total"
            :page.sync="currentModel.params.pageNum"
            :limit.sync="currentModel.params.pageSize"
            @pagination="queryList"
          />
        </template>        
      </div>
    </div>
    <dialog-normal
      ref="dialog-zyfw"
      :dialog-prop="{
        title: dialogZyfw.title,
        height: '55vh',
        width: '60%',
        submit: '确定',
        close: '取消'
      }"
      @normal-submit="submitDialog('zyfw', dialogZyfw.currentItem)"
      >
      <template #dialog-content v-if="$refs[`dialog-zyfw`] && $refs[`dialog-zyfw`].showDialog">
        <el-form
          class="form-content"
          ref="zyfw-form" label-position="left"
          :model="dialogZyfw.currentItem"
          label-width="120px">
          <div class="form-title">服务信息</div>
          <el-form-item class="form-content-item" label="服务类型：" prop="serveTypeIdArr"
            :rules="{ required: true, message: `服务类型不能为空`, trigger: 'change',}">
            <div class="form-val flex-normal">
              <el-cascader
              v-model="dialogZyfw.currentItem['serveTypeIdArr']"
              :options="optionsTwoList"
              placeholder="请选择服务类型"></el-cascader>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item" label="服务名称：" prop="serveName"
            :rules="{ required: true, message: `类型名称不能为空`, trigger: 'input',}">
            <div class="form-val flex-normal">
              <el-input v-model="dialogZyfw.currentItem['serveName']" placeholder="请输入服务名称"></el-input>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item" label="服务封面" prop="imgUrl"
            :rules="{
              required: true,
              message: `类型封面不能为空`,
              trigger: 'change',
            }">
            <imageUpload v-model="dialogZyfw.currentItem['imgUrl']" :limit="1"></imageUpload>
          </el-form-item>
          <div class="form-title">服务明细</div>
          <el-form-item class="form-content-item" label="服务内容：" prop="serveDetails"
            :rules="{ required: true, message: `服务内容不能为空`, trigger: 'input',}">
            <div class="form-val flex-normal">
              <el-input v-model="dialogZyfw.currentItem['serveDetails']" placeholder="请输入服务内容"></el-input>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item" label="服务次数：" prop="itemNum"
            :rules="[
              { required: true, message: `服务次数不能为空`, trigger: 'input',},
              { validator: validateNum, trigger: 'blur'}
            ]">
            <div class="form-val flex-normal">
              <el-input v-model="dialogZyfw.currentItem['itemNum']" placeholder="请输入服务次数"></el-input>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item" label="核销价：" prop="writeOffFee"
            :rules="[
              { required: true, message: `核销价不能为空`, trigger: 'input',},
              { validator: validateMoney, trigger: 'blur'}
            ]">
            <div class="form-val flex-normal">
              <el-input v-model="dialogZyfw.currentItem['writeOffFee']" placeholder="请输入核销价"></el-input>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item" label="市场单价：" prop="price"
            :rules="[
              { required: true, message: `市场单价不能为空`, trigger: 'input',},
              { validator: validateMoney, trigger: 'blur'}
            ]">
            <div class="form-val flex-normal">
              <el-input v-model="dialogZyfw.currentItem['price']" placeholder="请输入市场单价"></el-input>
            </div>
          </el-form-item>
          <template v-if="showRicket"> 
            <admin-ticket-model :arr="dialogZyfw.ticketArr" :card-list="dialogZyfw.currentItem['cardRollCodeList']" 
            @change="ticketChange"/>
          </template>
          <template v-else>
            <div class="form-title">适用商户</div>
            <el-form-item class="form-content-item">
              <div class="storeList-model-container">
                <div class="store-list-title-container flex-between">
                  <div class="title-content flex-center">
                    <span class="title-txt">商家列表（{{dialogZyfw.shopList.length}}家）</span>
                  </div>
                  <div class="search-content flex-center">
                    <el-input v-model="dialogZyfw.searchProp.text" filterable
                      remote reserve-keyword placeholder="请输入关键词"
                      @input="remoteMethod">
                    </el-input>
                  </div>
                </div>
                <el-scrollbar class="store-list-main">
                  <div :class="['item flex-between', item.isChecked && 'active']"
                    v-for="item in dialogZyfw.searchProp.options" :key="item.id">
                    <div class="item-content flex-normal">
                      <span class="item-label ellipsis-1">{{item.shopName}}</span>
                      <span class="item-desc ellipsis-1">{{item.shopAddress}}</span>
                    </div>
                    <div :class="['item-action flex-normal', item.isChecked && 'active']"
                      @click="actionShopItem(item)">
                      <span class="action-icon car-common-icon">&#xe663;</span>
                      <span class="action-txt">选择</span>
                    </div>
                  </div>
                </el-scrollbar>
              </div>
            </el-form-item>
          </template>
        </el-form>
      </template>
    </dialog-normal>
    
    <dialog-normal
      ref="dialog-fwlx"
      :dialog-prop="{
        title: dialogFwlx.title,
        height: '55vh',
        width: '45%',
        submit: '确定',
        close: '取消'
      }"
      @normal-submit="submitDialog('fwlx', dialogFwlx.currentItem)"
      >
      <template #dialog-content v-if="$refs[`dialog-fwlx`] && $refs[`dialog-fwlx`].showDialog">
        <el-form
          class="form-content"
          ref="fwlx-form" label-position="left"
          :model="dialogFwlx.currentItem"
          label-width="120px">
          <div class="form-title">服务类型</div>
          <el-form-item class="form-content-item" label="类型" prop="serveType"
            :rules="{
              required: true,
              message: `类型不能为空`,
              trigger: 'input',
            }">
            <div class="form-val flex-normal">
              <el-select v-model="dialogFwlx.currentItem['serveTypeTwo']" placeholder="请选择" size="small">
                <el-option v-for="i in serveTwoTypeList" :value="i.val" :label="i.label"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item" label="类型名称" prop="serveType"
            :rules="{
              required: true,
              message: `类型名称不能为空`,
              trigger: 'input',
            }">
            <div class="form-val flex-normal">
              <el-input v-model="dialogFwlx.currentItem.serveType" placeholder="请输入类型名称"></el-input>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item" label="启用状态" prop="typeStatus"
            :rules="{
              required: true,
              message: `启用状态不能为空`,
              trigger: 'change',
            }">
            <div class="form-val flex-normal no-border">
              <el-switch v-model="dialogFwlx.currentItem.typeStatus"></el-switch>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item" label="类型封面" prop="serveTypeImg"
            :rules="{
              required: true,
              message: `类型封面不能为空`,
              trigger: 'change',
            }">
            <imageUpload v-model="dialogFwlx.currentItem.serveTypeImg" :limit="1"></imageUpload>
          </el-form-item>
        </el-form>
      </template>
    </dialog-normal>
  </div>
</template>

<script>
import {
  getServeTypeDict
} from "@/api/common/index";
import {
  getServeTypeList, addServeType, editServeType, delServeType, controlServeType
} from "@/api/activeManage/serverType";
import {
  getServeList, addServe, editServe, delServe, getServeDetail, controlServe
} from "@/api/activeManage/serve";
import {
  getShopListNoPage
} from "@/api/userManage/admin-shop.js";
import {isDecimal} from '@/utils/tools.js'
const modelList = [
{label: '自营服务', name: 'zyfw', selectProp: {
  "selectList": [
      {"isShow": true, "clearable": true, "val": "", "placeholder": "请选择服务类型", "label": "服务类型", "name": "serveTypeId", "type": "select", "child": [
        {"dictLabel": "全部", "dictCode": ""}
      ]},
      {"isShow": true, "clearable": true, "val": "", "placeholder": "请输入服务名称", "label": "服务名称", "name": "serveName", "type": "input"}
  ]}, params: {pageSize: 10}, boo: {showSearch: true}, other: {total: 0}, list: []},
  {label: '服务类型', name: 'fwlx', selectProp: {
  "selectList": [
      {"isShow": true, "clearable": true, "val": "", "placeholder": "请输入或搜索", "label": "服务类型", "name": "serveType", "type": "input"},
  ]}, params: {pageSize: 10, pageNum: 1}, boo: {showSearch: true}, other: {total: 0}, list: []}
]
export default {
  components: {
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog"),
    "admin-ticket-model": () => import("@/views/components/active/admin-ticket-model"),
  },
  data() {
    return {
      serveTwoTypeList: [
        {label: '服务', val: '0'},
        {label: '外部卡券', val: '1'},
      ],
      boo: {
        loading_newZyfw: false,
      },
      optionsTwoList: [],
      currentModel: modelList[0],
      modelList: modelList,
      dictTypeList: [],
      dialogZyfw: {
        title: '新建服务',
        generateCardList: [], //新生成的卡券列表
        ticketArr: ['库存券码'],
        currentItem: {},
        shopList: [], //商家列表
        searchProp: {
          loading: false,
          autoComplete: null, //搜索对象
          text: this.val,
          options: []
        }, 
      },
      dialogFwlx: {
        title: '新建服务类型',
        currentItem: {}
      }
    };
  },
  computed: {
    showRicket(){
      let { serveTypeIdArr = [] } = this.dialogZyfw.currentItem
      return serveTypeIdArr.includes('1')
    },
  },
  async mounted(){
    let _self = this
    let isSuccess = await _self.queryServeTypeDict()
    if(isSuccess){
      _self.queryList()
    }
  },
  methods: {    
    // 根据商户池获取商户列表
    async queryShopListByPool(){
      let isSuccess = false, _self = this
      let { suitShopIds = [] } = _self.dialogZyfw.currentItem
      await getShopListNoPage().then(res => {
        const { data = [] } = res
        _self.dialogZyfw.shopList = data.map(item => {
          return {
            id: item.id,
            shopName: item.shopName,
            shopAddress: item.shopAddress,
            isChecked: suitShopIds.includes(`${item.id}`)
          }
        })
        _self.dialogZyfw.searchProp.options = _self.dialogZyfw.shopList
        isSuccess = true
      })   
      return isSuccess
    },
    // 搜索
    remoteMethod(query) {
      let _self = this
      if (query !== '') {
        _self.dialogZyfw.searchProp.options = _self.dialogZyfw.shopList.filter(item => {
          let {shopName} = item
          return shopName && shopName.indexOf(query) > -1;
        });
      } else {
        _self.dialogZyfw.searchProp.options = _self.dialogZyfw.shopList;
      }
    },
    actionShopItem(item){
      let _self = this
      _self.$set(item, 'isChecked', !item.isChecked)
      let arr = _self.dialogZyfw.searchProp.options.filter(i => i.isChecked).map(i => i.id)
      _self.$set(_self.dialogZyfw.currentItem, 'suitShopIds', arr)
    },
    validateNum: (rule, value, callback) => {
      let reg = /^\d+$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的整数'));
      } else {
        callback();
      }
    },
    validateMoney: (rule, value, callback) => {
      if (!isDecimal(`${value}`)) {
        callback(new Error('请输入正确的金额'));
      } else {
        callback();
      }
    },
    // 获取每一页中的题目
    toTreeData(list){
      let arrTree = []
      let arrObj = list.reduce((acc, cur) => {
        // 如果不存在这个键，则设置它赋值 [] 空数组
        if (!acc[cur.serveTypeTwo]) {
          acc[cur.serveTypeTwo] = [];
        }
        cur.value = `${cur.id}`
        cur.label = cur.serveType
        acc[cur.serveTypeTwo].push(cur)
        return acc
      }, {})
      for(let key in arrObj){
        arrTree.push({
          value: key,
          label: key == '0' ? '服务' : '外部卡券',
          children: arrObj[key]
        })
      }
      return arrTree
    },
    /** 查询用户列表 */
    async queryServeTypeDict(type) {
      let _self = this, isSuccess = false
      await getServeTypeDict()
      .then((res) => {
        isSuccess = true
        _self.dictTypeList = res.data
        _self.optionsTwoList = _self.toTreeData(res.data)
        console.log(_self.toTreeData(res.data), 9999)
      })
      return isSuccess
    },
    tabChange(tab){
      let _self = this
      _self.currentModel = tab
      _self.queryList()
    },
    // 搜索条件查询
    searchAction() {
      let _self = this
      // _self.currentModel.params = {}
      _self.queryList('init')
    },
    /** 查询用户列表 */
    async queryList(type) {
      let _self = this
      _self.$set(_self.currentModel.boo, 'loading', true)
      if(type == 'init'){
        _self.$set(_self.currentModel.params, 'pageNum', 1)
        _self.$set(_self.currentModel.params, 'pageSize', 10)
      }
      let queryParams = JSON.parse(JSON.stringify(_self.currentModel.params))
      if(_self.currentModel.name == 'fwlx'){
        await getServeTypeList(queryParams)
        .then((res) => {
          res.rows.forEach(item => {
            item.typeStatus = item.typeStatus == 1 ? true : false
          })
          _self.$set(_self.currentModel.other, 'total', res.total)
          _self.$set(_self.currentModel, 'list', res.rows)
        })
      }else if(_self.currentModel.name == 'zyfw'){
        queryParams['serveTypeId'] = queryParams['serveTypeId'] ? (queryParams['serveTypeId'][1] || '') : ''
        await getServeList(queryParams)
        .then((res) => {
          _self.$set(_self.currentModel.other, 'total', res.total)
          _self.$set(_self.currentModel, 'list', res.rows)
        })
      }
      
      _self.$set(_self.currentModel.boo, 'loading', false)
    },
    /** 删除按钮操作 */
    deleteRow(row) {
      let id = row.id, _self = this
      this.$modal
        .confirm('是否确认删除？')
        .then(function () {
          if(_self.currentModel.name == 'fwlx') return delServeType(id);
          if(_self.currentModel.name == 'zyfw') return delServe(id);
          return delLand(id);
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
          _self.queryServeTypeDict()
          _self.currentModel.params = {}
          return _self.queryList('init');
        })
        .catch(() => {});
    },
    controlTypeRow(row){
      let _self = this
      row.isControl = true
      _self.$set(row, 'isControl', true)
      controlServeType({id: row.id}).then(res => {
        _self.$set(row, 'typeStatus', !row.typeStatus)
        _self.$set(row, 'isControl', false)
        _self.queryServeTypeDict()
        _self.$message.success('操作成功')
      }).catch(() => {
        _self.$set(row, 'isControl', false)
      })
    },
    ticketChange(list){
      let _self = this
      _self.$set(_self.dialogZyfw.currentItem, 'cardRollCodeList', list.map(i => {
        return {cardRollCode: i.cardRollCode}
      }))
    },
    // 事件集合 -- 转发
    actionsMaps(ref, acion, row){
      let _self = this
      let actionsMap = () => {
        return new Map([
          [{ref: 'zyfw', acion: 'add:show'}, async ()=>{
            _self.dialogZyfw.title = '新增服务'
            _self.dialogZyfw.currentItem = {}
            _self.dialogZyfw.ticketArr = ['库存券码']
            _self.boo.loading_newZyfw = true
            await _self.queryShopListByPool()
            _self.$nextTick(() => {
              _self.boo.loading_newZyfw = false
              _self.$refs[`dialog-${ref}`].showDialog = true
            })
          }],
          [{ref: 'zyfw', acion: 'edit:show'}, async ()=>{
            _self.dialogZyfw.title = '编辑服务'
            _self.dialogZyfw.currentItem = JSON.parse(JSON.stringify(row))
            _self.dialogZyfw.ticketArr = ['库存券码', '已兑换']
            _self.$set(row, 'isEdit', true)
            getServeDetail(row.id).then(async res => {
              let {cardRollCodeList, serveTypeId, serveTypeTwo, suitShopIds = ''} = res.data
              _self.dialogZyfw.currentItem['cardRollCodeList'] = cardRollCodeList || []
              _self.dialogZyfw.currentItem['cardRollCodeList'] = cardRollCodeList || []
              _self.dialogZyfw.currentItem['serveTypeIdArr'] = [`${serveTypeTwo}`, `${serveTypeId}`]
              _self.dialogZyfw.currentItem['suitShopIds'] = suitShopIds ? suitShopIds.split(',') : []
              await _self.queryShopListByPool()
              _self.$nextTick(() => {
                _self.$refs[`dialog-${ref}`].showDialog = true
              })
            }).finally(() => {
              _self.$set(row, 'isEdit', false)
            })
          }],
          [{ref: 'fwlx', acion: 'add:show'}, ()=>{
            _self.dialogFwlx.title = '新增服务类型'
            _self.dialogFwlx.currentItem = {}
            _self.$set(_self.dialogFwlx.currentItem, 'typeStatus', false)
            _self.$set(_self.dialogFwlx.currentItem, 'serveTypeTwo', '0')
            _self.$nextTick(() => {
              _self.$refs[`dialog-${ref}`].showDialog = true
            })            
          }],
          [{ref: 'fwlx', acion: 'edit:show'}, ()=>{
            _self.dialogFwlx.title = '编辑服务类型'
            _self.dialogFwlx.currentItem = JSON.parse(JSON.stringify(row))
            _self.$nextTick(() => {
              _self.$refs[`dialog-${ref}`].showDialog = true
            })            
          }],
          [{ref: 'fwlx', acion: 'submit'}, ()=>{
            let params = JSON.parse(JSON.stringify(row))
            params.typeStatus = params.typeStatus ? '1' : '0'
            let success = (res, msg) => {
              _self.$message.success(msg)
              _self.queryServeTypeDict()
              if(msg == '添加成功'){
                _self.currentModel.params = {}
              }
              _self.queryList(msg == '添加成功' ? 'init' : '')
              _self.$nextTick(() => {
                _self.$refs[`dialog-${ref}`].showDialog = false
              })
            }
            if(params.id){
              editServeType(params).then(res => {
                success(res, '修改成功')
              }).finally(() => {
                _self.$refs[`dialog-${ref}`].loading = false;
              })
            }else {
              addServeType(params).then(res => {
                success(res, '添加成功')
              }).finally(() => {
                _self.$refs[`dialog-${ref}`].loading = false;
              })
            }        
          }],
          [{ref: 'zyfw', acion: 'submit'}, ()=>{
            let params = JSON.parse(JSON.stringify(row))
            params.serveTypeId = row['serveTypeIdArr'][1]
            params.serveTypeTwo = row['serveTypeIdArr'][0]
            params.suitShopIds = row['suitShopIds'] ? row['suitShopIds'].join(',') : ''
            delete params.serveTypeIdArr
            // params.typeStatus = params.typeStatus ? '1' : '0'
            let success = (res, msg) => {
              _self.$message.success(msg)
              if(msg == '添加成功'){
                _self.currentModel.params = {}
              }
              _self.queryList(msg == '添加成功' ? 'init' : '')
              _self.$nextTick(() => {
                _self.$refs[`dialog-${ref}`].showDialog = false
              })
            }
            if(params.id){
              editServe(params).then(res => {
                success(res, '修改成功')
              }).finally(() => {
                _self.$refs[`dialog-${ref}`].loading = false;
              })
            }else {
              addServe(params).then(res => {
                success(res, '添加成功')
              }).finally(() => {
                _self.$refs[`dialog-${ref}`].loading = false;
              })
            }        
          }]
        ])
      }
      let actions = [...actionsMap()].filter(([key,value])=>(key.ref == ref && key.acion == acion))
      actions.forEach(([key,value])=>value.call(this))
    },
    showDialog(ref, type, row) {
      let _self = this;
      if (_self.$refs[`${ref}-form`]) {
        this.resetForm(`${ref}-form`);
      }
      _self.$nextTick(() => {
        _self.actionsMaps(ref, `${type}:show`, row)
      })
    },
    submitDialog(ref, row) {
      let _self = this;
      if(this.$refs[`${ref}-form`]){
        this.$refs[`${ref}-form`].validate((valid) => {
          if (valid) {
            _self.$refs[`dialog-${ref}`].loading = true
            _self.actionsMaps(ref, `submit`, row)
          } else {
            _self.$refs[`dialog-${ref}`].loading = false;
            return false;
          }
        });
      }else{
        _self.$refs[`dialog-${ref}`].loading = true
        _self.actionsMaps(ref, `submit`, row)
      }
    },
  }
};
</script>
<style scoped lang="scss">
.service-container {
  .title-row{
    padding: vh(20) vw(20);
    .title-content{
      position: relative;
      margin-right: vw(50);
      transition: .2s;
      &.active{
        .title-txt{
          color: #3B3DCC;
        }
      }
      .title-txt{
        color: #6E7191;
        font-size: vh(16);
        cursor: pointer;
      }
    }
  }
  .form-content{
    .form-title{
      margin-bottom: vh(20);
      line-height: vh(34);
      font-size: vh(16);
      color: #0003AA;
    }
    .form-val {
      width: vw(360);
      flex-wrap: nowrap;
      &.no-border{
        border: none;
      }
    }
    .num-form-content ::v-deep{
      .num-desc-txt{
        font-size: 13px;
        color: #3D3D3D;
      }
      .num-form{
        width: vw(200);
        margin: 0 vw(20);
      }
      .num-btn{
        cursor: pointer;
        margin-right: vw(20);
        &.active{
          color: #0003AA;
        }
      }
    }
  }
}
.storeList-model-container::v-deep{
  user-select: none;
  line-height: normal;
  flex: 1;
  .option-content{
    .option-label{
      font-size: vh(13); 
      color: #333;
    }
    .option-desc{
      font-size: vh(12); 
      color: #999;
      padding-left: vw(10);
    }
  }
  .store-list-title-container{
    .title-content{
      height: vh(40);
      .title-txt{
        color: #3D3D3D;
        font-size: 13px;
      }
    }
    .search-content{
      background: rgba(237, 237, 237, 0.4);
      border-radius: vh(3);
      .el-input--medium .el-input__inner{
        height: vh(36);
        line-height: vh(36);
      }
      .el-input__inner{
        border: none;
        background-color: transparent;
      }
    }
  }
  .store-list-main{
    border: 1px solid #DDDDDD;
    border-radius: vh(3);
    padding: vh(13) vw(12);
    overflow: hidden;
    height: vh(300);
    margin-top: vh(10);
    .item-action{
      cursor: pointer;
      transition: .2s;
      &.active{
        font-weight: bold;
        .action-txt, .action-icon{
          color: #0003AA;
        }
      }
      .action-icon{
        color: #666666;
      }
      .action-txt{
        color: #3E3E3E;
        font-size: 13px;
        margin-left: vw(10);
      }
    }
    .item{
      padding-right: vw(25);
      margin-bottom: vh(15);
      .item-content{
        color: #666666;
        width: 70%;
        .item-label{
          width: 40%;
          margin-right: vw(20);
          font-size: 13px;
        }
        .item-desc{
          flex: 1;
          font-size: 13px;
        }
      }
      .item-btn{
        color: #767676;
        cursor: pointer;
      }
    }
  }
}
</style>